<template>
	<view class="card-box" >
		<view class="card-item" @click="onClick(item.title)" v-for="item in listData" :key="item.title">
			<div class="img" :class="item.className"></div>
			<text>{{item.title}}</text>
		</view>
	</view>
</template>

<script>
	/**
	 * card 图标按钮
	 * @property { Array[objeckt] } listData 按钮样式类名和标题
	 * @value className 图标样式类名，切换图标
	 * @value title 标题
	 * @event {Function} click 点击 card-item 触发事件
	 *@example  <card :list-data="[
	  		  {
	  			  className:'release',
	  			  title:'荣耀发布'
	  		  },
	  		  {
	  			  className:'whole',
	  			  title:'查看全部'
	  		  },
	  		  {
				  className:'union',
				  title:'荣耀联盟'
	  		  },
	  ]" @on-click="onCard"></card>
**/
	export default {
		name: "card",
		props: {
			listData: {
				type: Array,
				default: new Array(),
			}
		},
		methods: {
			onClick(name) {
				this.$emit("on-click", name)
			}
		}
	}
</script>

<style lang="less" scoped>
	.card-box {
		width: 85vw;
		display: flex;
		flex-flow: row;
    flex-wrap: wrap;
		justify-content: flex-start;
    align-items: center;
		.card-item {
			flex:25%;
			display: flex;
			flex-flow: column nowrap;
			align-items: center;

			.img {
				width: 85rpx;
				height: 85rpx;
				background-position-x: center;
				// 荣耀联盟
				&.union {
					background: @card-union-img no-repeat;
					background-size: 100% 100%;
				}
        &.apartment {
          background: @card-apartment-img no-repeat;
          background-size: 100% 100%;
        }
				// 元宇宙
				&.metaverse {
					background: @card-metaverse-img no-repeat;
					background-size: 100% 100%;
				}
				// 荣誉库
				&.honor {
					background: @card-honor-img no-repeat;
					background-size: 100% 100%;
				}
				// 相互帮
				&.assistance {
					background: @card-assistance-img no-repeat;
					background-size: 100% 100%;
				}
				// 智能客服
				&.customer {
					background: @card-customer-img no-repeat;
					background-size: 100% 100%;
				}
				// 荣耀活动
				&.activity {
					background: @card-activity-img no-repeat;
					background-size: 100% 100%;
				}
				// 荣耀课堂
				&.classroom {
					background: @card-classroom-img no-repeat;
					background-size: 100% 100%;
				}
				// 订单中心/全部订单
				&.order {
					background: @card-order-img no-repeat;
					background-size: 100% 100%;
				}
				// 荣耀发布
				&.release {
					background: @card-release-img no-repeat;
					background-size: 100% 100%;
				}
				// 查看全部
				&.whole {
					background: @card-whole-img no-repeat;
					background-size: 100% 100%;
				}
				// 设计类
				&.design {
					background: @card-design-img no-repeat;
					background-size: 100% 100%;
				}
				// 开发类
				&.develop {
					background: @card-develop-img no-repeat;
					background-size: 100% 100%;
				}
				// 营销类
				&.marketing {
					background: @card-marketing-img no-repeat;
					background-size: 100% 100%;
				}
				// 咨询类
				&.advice {
					background: @card-advice-img no-repeat;
					background-size: 100% 100%;
				}
				// 其他
				&.other {
					background: @card-other-img no-repeat;
					background-size: 100% 100%;
				}
				// 待使用
				&.operate {
					background: @card-operate-img no-repeat;
					background-size: 100% 100%;
				}
				// 待提货
				&.take {
					background: @card-take-img no-repeat;
					background-size: 100% 100%;
				}
				// 已完成
				&.completed {
					background: @card-completed-img no-repeat;
					background-size: 100% 100%;
				}
				// 加入企业
				&.join {
					background: @card-join-img no-repeat;
					background-size: 100% 100%;
				}
				// 意见反馈
				&.opinion {
					background: @card-opinion-img no-repeat;
					background-size: 100% 100%;
				}
				// 帮助与客服
				&.help {
					background: @card-help-img no-repeat;
					background-size: 100% 100%;
				}
				// 实名认证
				&.realname {
					background: @card-realName-img no-repeat;
					background-size: 100% 100%;
				}
			}

			text {
				font-family: "ali";
				color: #68696A;
				font-weight: 500;
				font-size: 23rpx;
			}

		}
	}
</style>
